<template>
    <div class="flex gap-2">
      <el-button type="primary" size="small" @click="addHandle" plain>新增口味</el-button>
      <table class="table-list-container">
        <tbody>
            <tr v-for="(item, index) in tableLists" :key="index">
                <td><el-select
                        style="width: 140px;"
                        v-model="item.flavorId"
                        placeholder="Select"
                        @change="(val) => selectChange(val, index)"
                    >
                        <el-option
                            v-for="sitem in sourceLists"
                            :key="sitem.flavorId"
                            :label="sitem.flavorName"
                            :value="sitem.flavorId"
                        />
                    </el-select>
                </td>
                <td>
                    <el-tag 
                        style="margin: 0 4px;"
                        :checked="tag.checked"
                        @click="onTagChange(tag, index)"
                        v-for="tag in item.flavorValue"
                        :key="tag.id"
                        :type="tag.type"
                        :closable="false"
                        :round="true"
                        :disable-transitions="true"
                    >
                        {{ tag.name }}
                    </el-tag>
                </td>
                <td>
                    <el-button
                    size="small"
                    @click="deleteHandle(index)"
                    :key="index"
                    type="danger" :icon="Delete" circle
                    />
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</template>
  
<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { watch, onMounted, nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'
import baseService from "@/service/baseService";

const props = defineProps({
  dishId: { type: Object, required: false }
})

const emit = defineEmits(['update:flavorLists'])

const tableLists = ref([])
const sourceLists = ref([])
const curValue = ref(null)
const tagLists = ref([])
const fListsCopy = ref([])

const addHandle = () => {
    tableLists.value.push({flavorId: null, flavorValue: []})
}

const getData = (vals) => {
    const data = vals.filter(item => item.flavorId && item.flavorValue.length > 0).map(item => {
    const newArrs = [];
    item.flavorValue.forEach(fitem => {
      if (fitem.checked) {
        newArrs.push(fitem.name);
      }
    })
    return {flavorId: item.flavorId, flavorValue: newArrs.join(",")};
  })
  return data;
}

const deleteHandle = (index) => {
    tableLists.value.splice(index, 1)
    const data = getData(tableLists.value)
    emit('update:flavorLists', data)
}


const onTagChange = (tag, index) => {
    tableLists.value = tableLists.value.map((item, idx) => {
        if (idx == index) {
            item.flavorValue.forEach(item => {
                if (item.name === tag.name) {
                    item.checked = !item.checked
                    item.type = item.checked ? 'success' : 'info'
                }
            })
        }
        return item;
    })
    const data = getData(tableLists.value)
    emit('update:flavorLists', data)
}

const selectChange = (value, index) => {
    tableLists.value = tableLists.value.map((item, idx) => {
        if (idx == index) {
            const flavorValue = sourceLists.value.find(item => item.flavorId == value).flavorValue
            const flavorValueLists = flavorValue.split(',').map((item, index) => {
                return {id: index, name: item, checked: false, type: 'info'}
            })
            // 保留初始时的状态
            fListsCopy.value.forEach(fitem => {
                if (fitem.flavorId == value) {
                    flavorValueLists.forEach(citem => {
                        if (fitem.flavorValue.split(",").includes(citem.name)) {
                            citem.checked = true
                            citem.type = 'success'
                        }
                    })
                }
            })

            item.flavorId = value
            item.flavorValue = flavorValueLists
        }
        return item;
    })
}

const init = (fLists) => {
    fListsCopy.value = fLists
    tableDataRequest(fLists);
};

// 获取信息
const tableDataRequest = (fLists) => {
  baseService.get("/sys/flavors/page", {
    page: 1, 
    limit: 10000,
    orderField: "update_date",
    order: "desc"

  }).then((res) => {
    if (res.code == 200) {
        sourceLists.value = res.data.list;

        const newTableLists = []
            // 初始化口味表列表
        sourceLists.value.forEach(item => {
            const nItem = {flavorId: item.flavorId, flavorValue: item.flavorValue.split(",").map((item, index) => {
                return {id: index, name: item, checked: false, type: 'info'}
            }) }
            fLists.forEach(fitem => {
                if (fitem.flavorId == nItem.flavorId) {
                    nItem.flavorValue.forEach(nnitem => {
                        if (fitem.flavorValue.split(",").includes(nnitem.name)) {
                            nnitem.checked = true
                            nnitem.type = 'success'
                        }
                    })
                    newTableLists.push(nItem)
                }
            })
        })

        tableLists.value = newTableLists
    }
  });
};
defineExpose({
  init
});
</script>
<style lang="less" scoped>
.table-list-container {
    td {
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
</style>
  